<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博详情</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/microblog_detail.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
<div class="nav">
    <img src="image/微博图标.jpeg" alt="">
    <span class="title">我的博客系统</span>

    <span class="spacer"></span>

    <a href="microblog_search.html">搜索</a>
    <a href="microblog_list.html">新鲜事</a>
    <a href="microblog_edit.html">写微博</a>
    <a href="logout">退出</a>
</div>

<div class="container">
    <div class="container-left">
        <div class="card">
            <img src="image/微博图标.jpeg" alt="">
            <h3></h3>
            <div class="counter">
                <span>关注</span>
                <span>粉丝</span>
            </div>
            <div class="counter">
                <span>--</span>
                <span>--</span>
            </div>
            <div class="counter">
                <span>文章</span>
                <span>阅读量</span>
            </div>
            <div class="counter">
                <span>--</span>
                <span>--</span>
            </div>
            <div class="counter">
                <span>成就</span>
            </div>
        </div>
    </div>

    <!-- 右侧内容详情 -->
    <div class="container-right">
        <!-- 这个 div 里来放博客的内容 -->
        <div class="blog-content">
            <!-- 博客标题 -->
            <h3></h3>
            <!-- 博客时间 -->
            <div class="date"></div>
            <!-- 博客正文 -->
            <div id="content" style="opacity: 65%">

            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="js/app.js"></script>
<script>
    function getBlog() {
        $.ajax({
            type: 'get',
            url: 'blog' + location.search,
            success: function(body) {
                // body 就是得到的一个 json 格式的 博客数据. 由于响应的 Content-Type 是 application/json
                // 因此 jquery 就会自动把响应数据转成 js 对象.
                let h3 = document.querySelector('.blog-content h3');
                h3.innerHTML = body.title;
                // let divName = document.querySelector('.blog-content .name');
                // divName.innerHTML = body.username;
                // 刚才这里是直接把正文内容设置到 innerHTML 中了, 没有渲染的过程的.
                // let divContent = document.querySelector('#content');
                // divContent.innerHTML = body.content;
                // 靠谱的做法, 应该是先使用 editor.md 进行渲染.
                // [重要] 这个方法就是 editor.md 提供的一个方法把 markdown 字符串转成格式化的效果.
                // 第一个参数是一个 div 的 id, 表示要把渲染结果放到哪个 div 中.
                // 第二个参数是一个 js 对象, 把正文内容传入即可. (还支持很多别的参数属性, 此处暂时不涉及)
                editormd.markdownToHTML('content', {
                    markdown: body.content
                });
            }
        });
    }

    function getUserInfo(){
        $.ajax({
            type: 'get',
            url: 'userInfo' + location.search,
            success: function(body){
                //让后端在查询失败的时候, 不要返回200, 而是返回403
                //避免在前面这里触发success分支
                let h3 = document.querySelector('.card>h3');
                h3.innerHTML = body.username;
                // if(body.isYourBlog){
                //     //在导航栏中加个按钮, 用来删除文章
                //     let deleteA = document.createElement('a');
                //     deleteA.href = 'blogDelete' + location.search;
                //     deleteA.innerHTML = '删除';
                //
                //     let navDiv = document.querySelector('.nav');
                //     navDiv.appendChild(deleteA);
                // }
            }
        });
    }

    // 在页面加载之后, 要调用代码.
    getBlog();

    // 验证登录状态
    //checkLogin();

    //获取当前用户信息
    //getUserInfo();
</script>
</body>
</html>